<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title>登录中心</title>

    <th:block th:insert="~{/common/include_easyui :: include_easyui}"></th:block>
    <script th:src="@{/script/verificationNumbers.js}" ></script>
    <script th:src="@{/script/canvas-particle.js}" ></script>

    <style type="text/css">
        .panel-body{
            padding: 0px;
            overflow: hidden;
        }
    </style>
</head>
<body style="overflow: hidden;">

<div id="win" style="padding:50px 60px;">
    <form  method="POST" th:action="@{/SSOAuth}" id="loginForm">
        <div style="margin-bottom:10px">
            <input name="userAccount" id="userAccount" class="easyui-textbox easyui-validatebox tb" style="width:100%;height:40px;"
                   data-options="required:true,validType:'length[3,15]',prompt:'账号',iconCls:'icon-man',iconWidth:38"  th:value="${param.userAccount}"/>
        </div>
        <div style="margin-bottom:20px">
            <input name="userPwd" id="userPwd" class="easyui-passwordbox easyui-validatebox tb" style="width:100%;height:40px;"
                   data-options="required:true,validType:'length[3,15]',prompt:'密码',iconWidth:38" th:value="${param.userPwd}"/>
        </div>
        <div style="margin-bottom:20px" >
            <canvas id="myCanvas" onclick="createCode();" class="passcode"
                    style="height: 40px; width: 96px;float:left; cursor: pointer;">对不起，您的浏览器不支持canvas，请下载最新版浏览器!</canvas>
            <input name="code" id="J_codetext" maxlength="4"  class="easyui-textbox easyui-validatebox tb"
                   type="text" style="width:200px;height:40px;"
                   data-options="required:true,prompt:'验证码'" validType="equals['#codeHidden']"  />
            <input type="hidden" id="codeHidden" />
        </div>
        <div style="margin-bottom:20px">
            <input type="checkbox">
            <span>Remember me</span>
        </div>
        <div>
            <button class="easyui-linkbutton" id="addBtn" data-options="iconCls:'icon-ok'" style="padding:5px 0px;width:100%;">
                <span style="font-size:14px;">登录</span>
            </button>
        </div>
        <input type='hidden' name='goto' th:value='${#request.getParameter("goto")}' >
    </form>
</div>


<script type="text/javascript" th:inline="javascript">

    $(function(){
        //配置
        var config = {
            vx: 	4,//点x轴速度,正为右，负为左
            vy:  	4,//点y轴速度
            height: 3,//点高宽，其实为正方形，所以不宜太大
            width: 	3,
            count: 	100,//点个数
            color:  "121, 162, 185",//点颜色
            stroke: "110,215,215",//线条颜色
            dist: 	6000,//点吸附距离
            e_dist: 20000,//鼠标吸附加速距离
            max_conn: 10//点到点最大连接数
        }
        //调用
        CanvasParticle(config);


        $('#win').window({
            width:450,
            height:350,
            title:'系统登录界面',
            iconCls:'icon-key_go',
            collapsible:false,//定义是否显示可折叠按钮
            minimizable:false, //定义是否显示最小化按钮
            maximizable:false, //定义是否显示最大化按钮
            closable:false, //定义是否显示关闭按钮
            closed:false, //定义是否可以关闭窗口
            resizable:false //定义是否能够改变窗口大小。

        });
        $('#addBtn').bind('click', function(){
            var isValid = $('#userAccount').validatebox('isValid')&&$('#userPwd').validatebox('isValid')&&$('#J_codetext').validatebox('isValid');
            return isValid;
        });

        $.extend($.fn.validatebox.defaults.rules, {
            equals: {
                validator: function(value,param){
                    return value.toUpperCase() == $(param[0]).val();
                },
                message: '验证码不正确'
            }
        });
    });
</script>

<script type="text/javascript" th:if="${null!=loginMsg}">
    $(function(){
        $.messager.alert('登录提示','[[${loginMsg}]]');
    });
</script>
</body>
</html>